<template>
  <div class="content">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
	
	   <div class="intergral-goods-list-page" >
			   <u-sticky>
				   <div style="padding: 10px 12px;background: #fff;">
					   <u-search placeholder="搜索商品名称" v-model="keywords" @search="searchList" :showAction="false"></u-search>
				   </div>
					
					<!--筛选栏-->
					<div class="tab-div">
						<div class="tab-item" :class="{'active': sort == 0}" @click="onchangeSort(0)" style="width:33.33%">综合</div>
						<div class="tab-item" :class="{'active': sort == 3 || sort == 4}" @click="onchangeSort(4)" style="width:33.33%">
							<span class="span">已兑量</span> 
							<span style="width:16px;padding-left:8px" class="span" >
								<u-icon name="arrow-up-fill" :class="{'active': sort == 3}" size="10" :color="sort == 3 ? '#ff9d02' : '#969799'" :top="10"></u-icon>
							    <u-icon name="arrow-down-fill" :class="{'active': sort == 4}" size="10" :color="sort == 4 ? '#ff9d02' : '#969799'" :top="9"></u-icon>
							</span>
						</div>
						<div class="tab-item" :class="{'active': sort == 1 || sort == 2}" @click="onchangeSort(2)" style="width:33.33%">
							<span class="span">积分值</span> 
							<span style="width:16px;padding-left:8px" class="span">
								<u-icon name="arrow-up-fill" :class="{'active': sort == 1}" size="10" :color="sort == 1 ? '#ff9d02' : '#969799'" :top="10"></u-icon>
								<u-icon name="arrow-down-fill" :class="{'active': sort == 2}" size="10" :color="sort == 2 ? '#ff9d02' : '#969799'" :top="9"></u-icon>
							</span>
						</div>
					</div>
			   </u-sticky>
			   
	           <!--商品列表-->
	           <div class="goods-list-div">
	                   <div class="con-list-div">
	                       <div class="goods-item link-bg"  style="cursor: pointer" v-for="Item in list" @click="toItem(Item['goodsId'])" :key="Item['goodsId']">
	                           <div class="goods-img">
	                               <img :src="Item['goodsImage']" style="width:100%;height:100%;" mode="aspectFit" class="img"/>
	                           </div>
	                           <div class="goods-info">
	                               <div class="goods-name">{{ Item['goodsName'] }} </div>
	                               <div class="goods-attr"><span>已兑数量：{{ Item['saleNum'] }} </span></div>
	                               <div class="goods-price">
	                                   <span>{{ Item['goodsPrice'] }} <span style="font-size:10px;font-weight: 400;padding-left:5px">积分</span></span>
	                                   <span class="duihuan-btn">立即兑换</span>
	                               </div>
	                           </div>
	                       </div>
	   
	                   </div>
					   
					   <div style="padding:40rpx 0;">
					      <u-loadmore :status="status" ></u-loadmore>
					   </div>
	               
	           </div>
	   
	   </div>
	
	   <bnavbar ref="bnavbar"></bnavbar>
	
  </div>
</template>

<script>
  import bnavbar from './components/b-navbar';
  import{integralGoodsList,inquiryCartInfo} from '@/config/points.js'
  import {pageSeo} from '@/config/api.js'
  import store from '@/store';
  export default {
    components: {
       bnavbar

    },
    data() {
      return {
	    
			keywords:'',
			showRight:false,

			activeClassId:'',
			sort:0,
			list: [],
			loading: false,
			page:1,
			total:0,
			show:false,
			overlay:false,
			spinShow:false,
			carInfo:0,
			active:2,
			title:'',
			status: 'loadmore',
      }
    },

	async onLoad(options) {
    	await this.$onLaunched;	
	
       this.options = options;
	   this.keywords = this.options.keywords ? this.options.keywords : '';
	   this.activeClassId = this.options.classId ? this.options.classId : '';
	   this.page = 1;
	   this.sort = 0;
	   this.clearData();
	   this.getList();
	   uni.setNavigationBarTitle({
	         title:this.options.className ? this.options.className : '商品列表'
	   });
		   
	   this.$refs.bnavbar.init(2,'#F23D4F')
    },
	
	async onShow() {
		// #ifdef H5
		pageSeo({pageType: 'indexPage'}).then((res)=>{
			document.title = res.pageTitle;
		})
		// #endif	
	},

	
    methods: {
		
		//搜索
		searchList() {
			this.clearData();
			this.getList();
		},
		//去商品详情页
		toItem(id){
			uni.navigateTo({
				url: "integralGoodsInfo?goodsId=" + id
			})
		},

		//切换排序
		onchangeSort(num){
			switch (num) {
				case 0 :
					this.sort = num;
					break;
				case 4:
					this.sort = this.sort == 4 ? 3 :4;
					break;
				case 2:
					this.sort = this.sort == 2 ? 1 :2;
					break;
			}
			this.clearData();
			this.getList()
		},

		//清除数据
		clearData(){
			this.page = 1;
			this.total = 0;
			this.status = 'loadmore';
			this.list = [];
		},

		//获取列表
		getList(){
			this.loading = true;
			let listQuery = {};
			listQuery.classId = this.activeClassId;
			listQuery.keywords = this.keywords;
			listQuery.sort = this.sort;
			listQuery.pageNum = this.page;
			listQuery.pageSize = 10;
			integralGoodsList(listQuery).then((res)=>{
				this.loading = false;
				this.list = this.list.concat(res.list);
				this.total = res.count;
				// 数据全部加载完成
				if(this.list.length >= this.total) {
					this.status = 'nomore';
				}else{
					this.status = 'loadmore';
				}
			}).catch(()=>{
				// 加载状态结束
				this.loading = false;
				this.status = 'loadmore';
			})
		},
		
	},
	
	onReachBottom() {
		if(this.list.length >= this.count) {
			this.status = 'nomore';
			return ;
		}
		this.page = ++ this.page;
		this.getList()
	}
	

  }
</script>


<style lang="scss">
@import '@/style/common.scss';

.intergral-goods-list-page{
  padding-bottom:50px;
   .tab-div{
      height:40px;
      line-height: 40px;
      padding:0;
      @include flexbox(flex-start,flex-start);
      background: #fff;
      position: relative;
	  border-bottom: 1px solid #eee;
      .tab-item{
        width:25%;
        height:40px;
        text-align: center;
        font-size:$m-font;
        color:$font-color;
        position: relative;
        .span{
          display: inline-block;
          position: relative;
          height:40px;
          vertical-align: middle;
        }
    
        .uicon-arrow-up-fill{
          font-size: 10px;
          
          
        }
        .uicon-arrow-down-fill{
          font-size: 10px;
          
         
        }
        .iconshaixuan{
          font-size:18px;
        }
      }
      .tab-item.active{
        color:$theme-color;
      }
      .tab-item.active .iconshaixuan{
        color:$theme-color;
      }
      .tab-item.active:after{
        content: ' ';
        position: absolute;
        height:2px;
        width:50%;
        left:25%;
        bottom:2px;
        background: $theme-color;
      }
    }
    .tab-div:after{
      border-bottom:1px solid #eee
    }
  .goods-item{
	  position: relative;
	  @include flexbox(flex-start,flex-start);
	  padding:10px 16px;
	  background: #fff;
    .goods-img{
      border-radius: 8px;
      overflow: hidden;
	   width:105px;
	   height:105px;
	   .img{
		   width:100%;
		   height:100%;
		   object-fit: contain;
		 }
    }
	.goods-info{
	      width:calc(100% - 105px);
	      padding-left:16px;
    }	  
    .goods-name{
      margin-top:10px;
      color: #333333;
      font-size:14px;
      line-height: 20px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      height:40px;
    }
    .goods-attr{
      color: #8B8B8B;
      font-size:12px;
    }
    .goods-price{
      color: #FF0000;
      font-size:14px;
      font-weight: bold;
      margin-top:10px;
      .duihuan-btn{
        float:right;
        width:80px;
        text-align: center;
        height: 20px;
        background: #FFEFD5;
        border-radius: 10px;
        font-size:10px;
        font-weight: bold;
        color: #FF0000;
        line-height: 20px;
      }
    }
  }
}

</style>


    
    
